<template>
  <div class="form-fields">
    <div
      class="row"
      v-if="fieldsObj.type == 'text'"
      :class="{ 'hid-required': !fieldsObj.settings.required }"
    >
      <template v-if="type == 3">
        {{ fieldsObj.settings.value }}
      </template>
      <template v-else>
        <el-input
          v-if="fieldsObj.settings.min && fieldsObj.settings.max"
          :placeholder="`请输入${fieldsObj.title}`"
          :minlength="fieldsObj.settings.min"
          :maxlength="fieldsObj.settings.max"
          size="small"
          v-model="fieldsObj.settings.value"
        >
        </el-input>

        <el-input
          v-else
          :placeholder="`请输入${fieldsObj.title}`"
          size="small"
          v-model="fieldsObj.settings.value"
        >
        </el-input>
      </template>
    </div>

    <div
      class="row"
      v-if="fieldsObj.type == 'time'"
      :class="{ 'hid-required': !fieldsObj.settings.required }"
    >
      <template v-if="type == 3">
        {{
          formatShowTime(fieldsObj.settings.format, fieldsObj.settings.value)
        }}
      </template>
      <template v-else>
        <template v-if="fieldsObj.settings.contentType == 'localtime'">
          {{
            fieldsObj.settings.value
              ? formatShowTime(
                  fieldsObj.settings.format,
                  fieldsObj.settings.value
                )
              : getLocalTime(fieldsObj.settings.format)
          }}
        </template>
        <template v-else>
          <el-date-picker
            v-model="fieldsObj.settings.value"
            :type="fieldsObj.settings.formatStatus[fieldsObj.settings.format]"
            placeholder="选择时间"
            size="small"
          >
          </el-date-picker>
        </template>
      </template>
    </div>

    <div
      class="row"
      v-if="fieldsObj.type == 'department'"
      :class="{ 'hid-required': !fieldsObj.settings.required }"
    >
      {{ fieldsObj.settings.value ? fieldsObj.settings.value : "" }}
    </div>

    <div
      class="row"
      v-if="fieldsObj.type == 'applicant'"
      :class="{ 'hid-required': !fieldsObj.settings.required }"
    >
      {{ fieldsObj.settings.value ? fieldsObj.settings.value : "" }}
    </div>

    <div
      class="row"
      v-if="fieldsObj.type == 'textArea'"
      :class="{ 'hid-required': !fieldsObj.settings.required }"
    >
      <template v-if="type == 3">
        {{ fieldsObj.settings.value }}
      </template>
      <template v-else>
        <el-input
          v-if="fieldsObj.settings.min && fieldsObj.settings.max"
          :placeholder="`请输入${fieldsObj.title}`"
          :minlength="fieldsObj.settings.min"
          :maxlength="fieldsObj.settings.max"
          size="small"
          type="textarea"
          v-model="fieldsObj.settings.value"
        >
        </el-input>
      </template>
    </div>

    <div
      class="row"
      v-if="fieldsObj.type == 'select'"
      :class="{ 'hid-required': !fieldsObj.settings.required }"
    >
      <el-select
        :disabled="type == 3 ? true : false"
        v-model="fieldsObj.settings.value"
        :multiple="fieldsObj.settings.multiple"
        :filterable="fieldsObj.settings.filterable"
        class="lpage-form_select"
      >
        <el-option
          v-for="vi in fieldsObj.settings.options"
          :key="vi.value"
          :label="vi.label"
          :value="vi.value"
        ></el-option>
      </el-select>
    </div>

    <div
      class="row"
      v-if="fieldsObj.type == 'staticText'"
      :class="{ 'hid-required': !fieldsObj.settings.required }"
      :style="getStyle(fieldsObj)"
    >
      <template v-if="type == 3">
        {{ fieldsObj.settings.value }}
      </template>
      <template v-else>
        <el-input
          v-if="fieldsObj.settings.min && fieldsObj.settings.max"
          :placeholder="`请输入${fieldsObj.title}`"
          :minlength="fieldsObj.settings.min"
          :maxlength="fieldsObj.settings.max"
          size="small"
          v-model="fieldsObj.settings.value"
        >
        </el-input>

        <el-input
          v-else
          :placeholder="`请输入${fieldsObj.title}`"
          size="small"
          v-model="fieldsObj.settings.value"
        >
        </el-input>
      </template>
    </div>

    <div
      class="row"
      v-if="fieldsObj.type == 'link'"
      :class="{ 'hid-required': !fieldsObj.settings.required }"
    >
      <template v-if="type == 3">
        <a :href="fieldsObj.settings.value" target="_blank">
          {{ fieldsObj.settings.value }}
        </a>
      </template>
      <template v-else>
        <el-input
          :placeholder="`请输入${fieldsObj.title}`"
          size="small"
          v-model="fieldsObj.settings.value"
        >
        </el-input>
      </template>
    </div>

    <div
      class="row"
      v-if="fieldsObj.type == 'timerange'"
      :class="{ 'hid-required': !fieldsObj.settings.required }"
    >
      <template v-if="type == 3">
        <span v-if="Array.isArray(fieldsObj.settings.value)">
          {{ formatShowTime(fieldsObj.settings.format, fieldsObj.settings.value[0]) }} - {{
           formatShowTime(fieldsObj.settings.format, fieldsObj.settings.value[1])
          }}
        </span>
      </template>
      <el-date-picker
        v-else
        v-model="fieldsObj.settings.value"
         :type="fieldsObj.settings.formatStatus[fieldsObj.settings.format]"
        placeholder="选择时间"
        size="small"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :format="fieldsObj.settings.format"
      >
      </el-date-picker>
    </div>

    <div
      class="row"
      v-if="fieldsObj.type == 'file'"
      :class="{ 'hid-required': !fieldsObj.settings.required }"
    >
      <div class="out-row">
        <div
          class="block-file"
          v-for="(item, index) in fieldsObj.settings.value"
          :key="item.uid"
        >
          <i class="el-icon-document"></i>
          <span>{{ item.name }}</span>
					<!-- <img
						v-if="type !== 3"
						@click="deleteFile(fieldsObj.settings.value, index)"
						src="../img/delete.png"
						alt=""
					/> -->
        </div>
      </div>

      <el-upload
        v-if="type !== 3"
        class="avatar-uploader"
        action=""
        :show-file-list="false"
        :before-upload="checkFile"
        :http-request="uploadSectionFile"
        drag
        :limit="
          fieldsObj.settings.limitNum ? fieldsObj.settings.limitNum : 99999
        "
      >
        <!-- <img
          class="file-icon"
          src="@/assets/image/file-icon.png"
          alt=""
        /> -->
        <div class="el-upload__text">点击或将文件拖拽到这里上传</div>
        <!-- <div class="support-file">支持扩展名：{{ acceptList.join(' ') }}</div> -->
      </el-upload>
    </div>

    <div
      class="row"
      v-if="fieldsObj.type == 'cascadeChoice'"
      :class="{ 'hid-required': !fieldsObj.settings.required }"
    >
      <el-cascader
        :disabled="type == 3 ? true : false"
        size="small"
        v-model="fieldsObj.settings.value"
        :options="fieldsObj.settings.cascades"
        :props="{ multiple: fieldsObj.settings.multiple }"
        :filterable="fieldsObj.settings.filterable"
        clearable
      ></el-cascader>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { FileLimit } from '../plugins/fields.js'


export default {
  name: 'FormFields',
  // type 1 默认展示可以操作， 2 用户需要操作  3只读模式
  props: ['fields', 'type'],
  watch: {
    fields: {
      handler (val) {
        this.fieldsObj = val
      },
      immediate: true,
      deep: true,
    },
  },
  data () {
    return {
      fieldsObj: {},
    }
  },

  methods: {
    getStyle (item) {
      console.log(item)
      if (item.settings.style) {
        return {
          'justify-content': item.settings.style.textAlign
        }
      }
      return {}
    },

    deleteFile (list, index) {
      list.splice(index, 1)
    },

    async openFile (item) {
      console.log(item)
      const res = await targetFlowHttp(
        'manageFlowGetPng',
        '',
        `?fileUrl=${item.key}`,
        {
          isCode: false,
          method: 'get',
          responseType: 'arraybuffer',
          isloading: false,
        }
      )
      let blob = new Blob([res.data], { type: 'image/png' })
      let objurl = window.URL.createObjectURL(blob)
      window.open(objurl)
    },

    openLink (item) {
      window.open(item)
    },

    getLocalTime (format) {
      let fm = format.replace('yyyy', 'YYYY')
      return dayjs(new Date().getTime()).format(fm)
    },

    formatShowTime (format, value) {
      if (!value) {
        return ''
      }
      let fm = format.replace('yyyy', 'YYYY')
      return dayjs(value).format(fm)
    },

    checkFile (file) {
      const isLt2M =
        file.size / 1024 / 1024 < this.fieldsObj.settings.limitVolume
      if (!isLt2M) {
        this.$error(
          `上传图片大小不能超过 ${this.fieldsObj.settings.limitVolume}MB!`
        )
        return
      }
      let tempList = []
      let isName = true

      if (this.fieldsObj.settings.fileSelects.length) {
        this.fieldsObj.settings.fileSelects.forEach((item) => {
          let obj = FileLimit.find((row) => row.name == item)
          tempList = [...tempList, ...obj.list]
        })
        const name = file.name.substring(file.name.lastIndexOf('.') + 1)
        isName = tempList.includes(name)
        if (!isName) {
          this.$error(`不支持当前.${name}文件类型!`)
        }
      }

      // 预览只做上传提示
      if (this.type == 3 || this.type == 1) {
        return false
      }

      return isLt2M && isName
    },

    async uploadSectionFile (data) {
      let formData = new FormData()
      formData.append('file', data.file)
      const res = await targetFlowHttp('manageFlowUpload', formData)
      let obj = {
        uid: data.file.uid,
        name: data.file.name,
        size: data.file.size,
        key: res.key,
      }
      this.nowItem.settings.value.push(obj)
    },
  },
}
</script>

<style lang="less" scoped>
.form-fields,
.el-date-editor.el-input,
.el-range-editor--small.el-input__inner,
.el-cascader--small {
  width: 100%;
}
.row {
  display: flex;
  align-items: center;

  &::before {
    content: "*";
    font-size: 14px;
    color: #f5222d;
    margin-right: 4px;
    display: inline-block;
  }

  .hid-required {
    &::before {
      visibility: hidden;
    }
  }
}

:deep .el-upload-dragger {
  width: 275px;
  height: 122px;
}

.file-icon {
  height: 48px;
  margin: 8px auto;
}
.el-upload__text {
  color: #262a30;
  line-height: 24px;
  font-size: 14px;
}

.out-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .block-file {
    width: 228px;
    height: 32px;
    background: #ffffff;
    border-radius: 3px;
    border: 1px solid #dbdfeb;
    display: flex;
    align-items: center;
    margin-right: 32px;
    font-size: 14px;
    padding: 0 12px;
    flex: 1;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }

		img {
			width: 12px;
			height: 12px;
		}

    span {
      margin-left: 8px;
      flex: 1;
    }
  }
}
</style>
